<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link rel="stylesheet" href="../../css/mui.min.css" />
<link rel="stylesheet" href="../../css/app.css" />
<style type="text/css">
	.ptr {
	    height: 40px;
	    line-height: 40px;
	    font-size: 14px;
	    text-align: center;
	    color: #666;
	}
	#list {
	    position: relative;
	}
	#list li {
	    position: absolute;
	    top: 0;
	    left: 0;
	    width: 100%;
	}
</style>
</head>
<body class="of-hidden">
    <div class="mui-content">
        <div id="content" style="overflow: hidden;position: absolute;top: -40px;bottom: -40px;width: 100%;">
            <div class="inner">
                <div class="ptr">下拉刷新</div>
                <ul id="list" class="mui-table-view">
                    <li class="mui-table-view-cell">item</li>
                    <li class="mui-table-view-cell">item</li>
                    <li class="mui-table-view-cell">item</li>
                    <li class="mui-table-view-cell">item</li>
                    <li class="mui-table-view-cell">item</li>
                    <li class="mui-table-view-cell">item</li>
                    <li class="mui-table-view-cell">item</li>
                    <li class="mui-table-view-cell">item</li>
                    <li class="mui-table-view-cell">item</li>
                    <li class="mui-table-view-cell">item</li>
                    <li class="mui-table-view-cell">item</li>
                    <li class="mui-table-view-cell">item</li>
                    <li class="mui-table-view-cell">item</li>
                    <li class="mui-table-view-cell">item</li>
                    <li class="mui-table-view-cell">item</li>
                    <li class="mui-table-view-cell">item</li>
                    <li class="mui-table-view-cell">item</li>
                    <li class="mui-table-view-cell">item</li>
                    <li class="mui-table-view-cell">item</li>
                    <li class="mui-table-view-cell">item</li>
                </ul>
                <!--<div class="ptr">上拉加载更多</div>-->
            </div>
        </div>
    </div>
    <script src="../../js/mui.min.js"></script>
    <script src="../../libs/iscroll/build/iscroll-infinite.js"></script>
    <script type="text/javascript">
        (function($, doc) {
            $.init();

            var scroll = new IScroll('#content', {
                mouseWheel: true,
                infiniteElements: '#list li',
                //infiniteLimit: 2000,
                dataset: function (start, count) {
                    var page = start / 5 + 1;
                    queryList(page, function (data) {
                        if (data.length) {
                        	scroll.updateCache(start, data);
                        }
                    });
                },
                dataFiller: function (el, obj) {
                    if (obj) {
                        el.innerHTML = obj.modelObj.title;
                    }
                },
                cacheSize: 20
            });

            function queryList(page, callback) {
//              $.get('../data/list.json?page=' + page, function (ret) {
                $.post('/zty-web/crud/ztyNews/readAndCount', {
                    'page.pageSize': 20,
                    'page.currentPage': page
                }, function (ret) {
                    if (typeof data === 'string') {
                        data = JSON.parse(data);
                    }
                    callback && callback.call(this, ret.data.list || []);
                });
            }

            $('#list').on('tap', 'li', function () {
            	$.toast(this.innerText);
            });
        })(mui, document);
    </script>
</body>
</html>